import React, {Component} from 'react';
import './TopNav.less'
import{NavLink} from'react-router-dom'
/**
 * 背景图片:图标
 */
import topbar from '../../assert/img/topbar.png'
const searchStyle={
    width:'26px',
    height:'16px',
    background:`url(${topbar}) no-repeat 0px -108px`
};
const jtStyle={
    width:'16px',
    height:'16px',
    background:`url(${topbar}) no-repeat -228px -58px`
};
class TopNav extends Component {
    render() {
        return (
            <div className='m-top'>
                <div className="wrapper">
                    <h1 className='logo'>爱疯音乐</h1>
                    <ul className='m-nav'>
                        <li className='fst'>
                            <NavLink to='/home'>
                                <span>发现音乐</span>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/my'>
                                <span>我的音乐</span>

                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/friend'>
                                <span>朋友</span>
                                <i></i>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/store'>
                                <span>商城</span>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/musician'>
                                <span>音乐人</span>
                            </NavLink>
                        </li>
                        <li>
                            <NavLink to='/download'>
                                <span>下载客户端</span>
                                <i className='hot'>Hot</i>
                            </NavLink>
                        </li>
                    </ul>
                    <div className='search'>
                        <input type="text" placeholder='音乐/视频/电台/用户'/>
                        <button>创作者中心</button>
                        <i className='icon-search' style={searchStyle}></i>
                        <div className='user'>
                            <span>
                                <img src="http://p4.music.126.net/VnZiScyynLG7atLIZ2YPkw==/18686200114669622.jpg?param=30y30" alt=""/>
                                <i className='email'>8</i>
                                <i style={jtStyle} className='jt'></i>
                            </span>
                            <div id='userHidden'>
                                <ul>
                                    <li>
                                        <span>我的主页</span>
                                    </li>
                                    <li>
                                        <span>我的消息 <em>8</em></span>
                                    </li>
                                    <li>
                                        <span>我的等级</span>
                                    </li>
                                    <li>
                                        <span>VIP会员</span>
                                    </li>
                                    <li>
                                        <span>我的主页</span>
                                    </li>
                                    <li>
                                        <span>我的主页</span>
                                    </li>
                                    <li>
                                        <span>退出</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        );
    }
}

export default TopNav;